<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <base href="<%=basePath%>">
  <meta charset="utf-8">
  <title>小屏显示</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="layuiadmin/style/admin.css" media="all">
  <style type="text/css">
    /*表格单选框居中 */
	.layui-table-cell .layui-form-radio {
		position: relative;
		top: 50%;
	}
	/* 禁止刷新后出现横向滚动条 */
	body{overflow-y: scroll;} 
  </style>
</head>
<body>
	<div class="layui-fluid">
	  <div class="layui-row layui-col-space10">
	  	<div class="layui-col-md8">
	  		<div class="layui-card">
		  		<div class="layui-card-header"><span style="color: red;">${workline.name}</span> &nbsp;&nbsp;当前生产任务统计报表</div>
				<div class="layui-card-body">
				  <table id="LAY-workline-content-list" lay-filter="LAY-workline-content-list"></table> 
		      	</div>
	      	</div>
	   </div>
  
       <div class="layui-col-md4">
       	  <div class="layui-card">
	          <div class="layui-card-body">
	            <div id="main" style="width: 100%;height:400px;"></div>
	          </div>
	      </div>
       </div>
  </div>
  <script src="layuiadmin/layui/layui.js"></script>  
  <script>
  layui.config({
    base: 'layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'contlist', 'table', 'laydate','jquery','echarts'], function(){
    var table = layui.table
    ,admin = layui.admin
    ,echarts = layui.echarts
    ,$ = layui.$
    ,form = layui.form;
    
    table.render({
         elem: '#LAY-workline-content-list'
        ,url:'screanshow/findSmallscreanshowData/'
        ,where:{
        	linecode:'${workline.code}'
        }
        ,cols: [[
          {field:'prisonername', title: '生产人员'}
          ,{field:'producedCount', title: '实时产量'}
          ,{field:'qualifiednum', title: '合格产量'}
          ,{field:'plannum', title: '计划产量'}
          ,{field:'producedRate', title: '完成率'}
          ,{field:'qualitiedRate', title: '合格率'}
          ,{field:'problemCount', title: '问题数', sort: true}
         ]]
    });
    
    //动态添加图表
    $.ajax({
     type : 'post',
     async : false, //同步执行
         url :'producescheduleproblem/findProblemCountByGrouping?linecode=${workline.code}&producecode=${produceinfo.producecode}', 
         data : {}, //无参数
         dataType : 'json', //返回数据形式为json
         success : function(result) {
             if (result.flag == '1') {
                 //把result(即Json数据)以参数形式放入Echarts代码中
                 bind(result.data);
             }
         },
         error : function(errorMsg) {
             alert("加载数据失败");
         }
     }); //ajax
     
    //JS成功后的代码
    function bind(result){
        // 基于准备好的dom，初始化echarts图表
        var TypeSalesChart = echarts.init(document.getElementById('main'));
        var option = {
    		   title : {
    		        text: '质量问题比例',
    		        x:'center'
    		   }, 
 	   	   tooltip : {
 		        trigger: 'item',
 		        formatter: "{a} <br/>{b} : {c} ({d}%)"
 		   },
 	       series : [
 	               {
 	                   name:'数据来源',
 	                   type:'pie',
 	                   radius : '55%',
 	                   center: ['50%', '50%'],
 	                   data:(function(){
 	                       var res = [];
 	                       var len = result.length;
 	                           for(var i=0,size=len;i<size;i++) {
 	                            res.push({
 	                                //通过把result进行遍历循环来获取数据并放入Echarts中
 	                                name:  result[i].problemname+result[i].depotamount+"次",
 	                                value: result[i].depotamount
 	                            });
 	                           }
 	                           return res;
 	                   })()
 	               }
 	           ]
 	       };
 	       // 为echarts对象加载数据 
 	       TypeSalesChart.setOption(option);
 	   }
 	
  });
 
  </script>
</body>
</html>